<template>
  <div id="data-view">
    <dv-full-screen-container>
      <top />
      <div class="middle">
        <!-- 参数展示区 -->
        <div class="left-panel">
          <div class="parameter-row">
            <span class="parameter-label">合金体系:</span>
            <div class="parameter-options alloy-options">
              <button
                v-for="item in alloySystems"
                :key="item"
                :class="{ selected: item === selectedAlloySystem }"
                @click="updateSelection('alloySystem', item)"
              >
                {{ item }}
              </button>
            </div>
          </div>
          <div class="parameter-row">
            <span class="parameter-label">元素含量(wt%):</span>
            <div class="parameter-options element-options">
              <button
                v-for="item in elementContents"
                :key="item"
                :class="{ selected: item === selectedElementContent }"
                @click="updateSelection('elementContent', item)"
              >
                {{ item }}
              </button>
            </div>
          </div>
          <div class="parameter-row">
            <span class="parameter-label">温度(℃):</span>
            <div class="parameter-options temperature-options">
              <button
                v-for="item in temperatures"
                :key="item"
                :class="{ selected: item === selectedTemperature }"
                @click="updateSelection('temperature', item)"
              >
                {{ item }}
              </button>
            </div>
          </div>
          <div class="parameter-row">
            <span class="parameter-label">时间(s):</span>
            <div class="parameter-options time-options">
              <button
                v-for="item in times"
                :key="item"
                :class="{ selected: item === selectedTime }"
                @click="updateSelection('time', item)"
              >
                {{ item }}
              </button>
            </div>
          </div>
        </div>
        <div class="chart">
          <leftChart :parameters="parameters" />
          <TiChart :parameters="parameters" />
          <all-chart :parameters="parameters" />
        </div>
      </div>
    </dv-full-screen-container>
  </div>
</template>

<script>
import Top from '@/views/visual/top.vue'
import allChart from '@/components/all-chart'
import leftChart from '@/components/left_chart'
import TiChart from '@/components/Ti_chart'

export default {
  name: 'Home',
  components: {
    Top,
    allChart,
    leftChart,
    TiChart
  },
  data () {
    return {
      // 参数选项
      alloySystems: ['Fe-xAl', 'Fe-xCr', 'Fe-xCo', 'Fe-xMn', 'Fe-xNi'],
      elementContents: [], // 元素含量动态生成
      temperatures: [700, 750, 800, 850, 900, 950, 1000],
      times: [600, 1800, 3600],

      // 默认选项
      selectedAlloySystem: 'Fe-xAl',
      selectedElementContent: 0.5,
      selectedTemperature: 700,
      selectedTime: 600,

      // 打包参数
      parameters: {}
    }
  },
  methods: {
    updateSelection (key, value) {
      if (key === 'alloySystem') {
        this.selectedAlloySystem = value
        this.updateElementContents()
        this.selectedElementContent = this.elementContents[0]
      } else if (key === 'elementContent') {
        this.selectedElementContent = value
      } else if (key === 'temperature') {
        this.selectedTemperature = value
      } else if (key === 'time') {
        this.selectedTime = value
      }
      this.updateParameters()
    },
    updateElementContents () {
      const ranges = {
        'Fe-xAl': { start: 0.5, end: 8.0, step: 0.5 },
        'Fe-xCr': { start: 1, end: 18, step: 1 },
        'Fe-xCo': { start: 1, end: 25, step: 1 },
        'Fe-xMn': { start: 1, end: 24, step: 1 },
        'Fe-xNi': { start: 1, end: 10, step: 1 }
      }
      const range = ranges[this.selectedAlloySystem]
      this.elementContents = []
      for (let i = range.start; i <= range.end; i += range.step) {
        this.elementContents.push(Number(i.toFixed(1)))
      }
    },
    updateParameters () {
      this.parameters = {
        alloySystem: this.selectedAlloySystem,
        elementContent: this.selectedElementContent,
        temperature: this.selectedTemperature,
        time: this.selectedTime
      }
    }
  },
  mounted () {
    // 初始化元素含量范围
    this.updateElementContents()
    this.updateParameters()
  }
}
</script>

<style lang="scss">
#data-view {
  color: #fff;
  #dv-full-screen-container {
    background-image: url("../../assets/bg.png");
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
  }
  .chart {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: row;
  }
  .middle {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 50px 0 0 50px;
    height: 50%;
  }

  .left-panel {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .parameter-row {
    display: flex;
    align-items: center;
    gap: 15px;
  }

  .parameter-label {
    font-size: 20px;
    font-weight: bold;
  }

  .parameter-options {
    display: flex;
    flex-wrap: wrap;
  }

  /* 针对每种参数的间隔调整 */
  .alloy-options {
    gap: 2em;
  }

  .element-options {
    gap: 0.7em;
  }

  .temperature-options {
    gap: 2em;
  }

  .time-options {
    gap: 2em;
  }

  button {
    padding: 8px 15px;
    font-size: 18px;
    background: #444;
    color: white;
    border: 1px solid #666;
    border-radius: 5px;
    cursor: pointer;
  }

  button.selected {
    background: #007bff;
    border-color: #0056b3;
  }

  // 解决背景铺满问题
  body {
    margin: 0;
    padding: 0;
  }
}
</style>
